<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="/StudentInfo/utils/scripts/flat-ui.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="shortcut icon" href="/StudentInfo/utils/image/favicon.ico" type="image/x-icon"/>
  <meta charset="UTF-8">
  <title>选课管理系统</title>
  <script type="text/javascript" src="/StudentInfo/utils/js/jquery-3.3.1.min.js"></script>
  <!-- Loading Bootstrap -->
  <link href="/StudentInfo/utils/css/vendor/bootstrap.min.css" rel="stylesheet">
  <!-- Loading Flat UI Pro -->
  <link href="/StudentInfo/utils/css/flat-ui.css" rel="stylesheet">
  <!-- Loading Flat UI JS -->
  <script type="text/javascript" src="/StudentInfo/utils/scripts/flat-ui.min.js"></script>


  <script type='text/javascript' src='/StudentInfo/utils/scripts/particles.js'></script>
  <link href="/StudentInfo/utils/css/animate.css" rel="stylesheet">
</head>


<body>
<div id="particles-js">
  <canvas class="particles-js-canvas-el" width="1322" height="774" style="width: 100%; height: 100%;"></canvas>
</div>
<jsp:include page="teacherLeft.jsp"/>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h5>修改课程</h5>
        <form action="/StudentInfo/CoursePlanHandler/doaddcouplan/${sessionScope.tid}" method="post">
          <div class="row">
            <div class="col-md-6">
              <br/> 新建班级名称

              <input type="text" name="courseclass" value="${sessionScope.cplan.courseclass}" class="form-control" readOnly/>
              <h7>上课周</h7>
              <div class="" style="margin-bottom: 1rem">
                <input type="text" id="courseWeek" name="courseweek" value="${sessionScope.cplan.courseweek}" class="form-control" maxlength="8"/>
              </div>

              <h7>上课时间</h7>
              <div id="courseTime" class="" style="margin-bottom: 1rem">
                <input id="time" type="hidden" name="coursetime" value="">
                <c:forEach var="map" items="${sessionScope.selectionMap}">
                  <div id="${map.key}" style="padding-bottom: 10px">
                    <span>${map.value}</span>
                    <button onclick="deleteSelection(${map.key})" type="button" class="btn btn-warning" style="padding: 6px 12px">移除</button>
                  </div>
                </c:forEach>
              </div>

              <div class="row" style="margin-top: 1rem">
                <div class="col-md-4">
                  周次:
                  <select id="courseTimeWeek" class="courseType">
                    <option value="1">周一</option>
                    <option value="2">周二</option>
                    <option value="3">周三</option>
                    <option value="4">周四</option>
                    <option value="5">周五</option>
                    <option value="6">周六</option>
                    <option value="7">周日</option>
                  </select>
                </div>
                <div class="col-md-5">
                  上课节次:
                  <select id="courseTimeSelection" class="courseType">
                    <option value="1-2">1-2节</option>
                    <option value="3-4">3-4节</option>
                    <option value="5-6">5-6节</option>
                    <option value="7-8">7-8节</option>
                  </select>
                </div>
                <button onclick="addSelection()" type="button" class="btn btn-primary" style="padding: 7px 15px">添加</button>
              </div>

            </div>
            <div class="col-md-6">
              <h6>课程编号</h6>
              <div class="row">
                <div class="col-md-6">
                  <input type="text" name="cid" value="${sessionScope.cplan.cid}" class="form-control" readonly/>
                </div>
              </div>
              <h6>教师编号 </h6>
              <div class="row">
                <div class="col-md-6">
                  <input type="text" name="tid" value="${sessionScope.cplan.tid}" class="form-control" readonly/>
                </div>
              </div>
              <h6>上课教室 </h6>
              <div class="row">
                <div class="col-md-6">
                  <input type="text" name="classroom" id="classroom" value="${sessionScope.cplan.classroom}" class="form-control"
                         maxlength="8"/>
                </div>
              </div>
              <span id="couplan" style="color:#ff0000;"></span>
              <h6>学分 </h6>
              <div class="row">
                <div class="col-md-6">
                  <input type="text" name="credits" class="form-control" value="${sessionScope.cplan.credits}"
                         oninput="value=value.replace(/[^\d]/g,'')" maxlength="1"/>
                </div>
              </div>
              <h6>学时</h6>
              <div class="row">
                <div class="col-md-6">
                  <input type="text" name="period" class="form-control" value="${sessionScope.cplan.period }"
                         oninput="value=value.replace(/[^\d]/g,'')" maxlength="2"/>
                </div>
              </div>
              <h6>总人数</h6>
              <div class="row">
                <div class="col-md-6">
                  <input type="text" name="totalnum" class="form-control" value="${sessionScope.cplan.totalnum }"
                         oninput="value=value.replace(/[^\d]/g,'')" maxlength="2"/>
                </div>
              </div>
            </div>
            <div class="col-md-12" style="margin-top:1rem;">
              <input type="submit" value="修改" class="btn btn-primary btn-wide login-btn"/>
              <a class="btn btn-primary btn-wide login-btn cancelStyle" href="javascript:history.go(-1)">取消</a>
            </div>
          </div>
        </form>

    </div>
  </div>
</div>
<script>
    function addSelection() {
        var courseTimeWeek = $("#courseTimeWeek option:selected").val();
        var weekStr;
        if (courseTimeWeek == 1) {
            weekStr = "周一";
        }
        if (courseTimeWeek == 2) {
            weekStr = "周二";
        }
        if (courseTimeWeek == 3) {
            weekStr = "周三";
        }
        if (courseTimeWeek == 4) {
            weekStr = "周四";
        }
        if (courseTimeWeek == 5) {
            weekStr = "周五";
        }
        if (courseTimeWeek == 6) {
            weekStr = "周六";
        }
        if (courseTimeWeek == 7) {
            weekStr = "周日";
        }


        var courseTimeSelection = $("#courseTimeSelection option:selected").val();

        var result = weekStr + "：" + courseTimeSelection + "节";

        let id = Math.random();
        $("#courseTime").append(
            '<div id="' + id + '" style="padding-bottom: 10px">'+
            '<span>' + result + '</span>'+
            '<button onclick="deleteSelection(' + id + ')" type="button" class="btn btn-warning" style="margin-left: 10px; padding: 5px 12px">移除</button>'+
            '</div>'
        );

        // 给coursetime赋值
        var value = "";
        $("#courseTime span").each(function(){
            value = value + this.innerText + "，";
        });

        $("#time").val(value);
    }

    function deleteSelection(id) {
        var node = document.getElementById(id);
        var pNode = node.parentNode;
        pNode.removeChild(node);

        // 给coursetime赋值
        var value = "";
        $("#courseTime span").each(function(){
            value = value + this.innerText + "，";
        });

        $("#time").val(value);
    }
</script>
<script type="text/javascript" src="/StudentInfo/utils/scripts/flat-ui.js"></script>
<script src="/StudentInfo/utils/scripts/bganimation.js"></script>
</body>
</html>